<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window</title>
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/js/jquery.easyui.min.js"></script>
</head>
<body>
    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>简单窗口 <a href="javascript:$('#win').window('open');" class="easyui-linkbutton" icon="icon-print" >open</a></p>
    <div id="win" class="easyui-window" closed="true"  title="My Window" style="width:300px;height:100px;padding:5px;">
        Some Content.
    </div>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>
        自定义窗口工具栏，设置最大最小按钮
        <a href="javascript:$('#win2').window('open');" class="easyui-linkbutton" icon="icon-print" >open</a>
    </p>
    <div id="win2" class="easyui-window" closed="true" title="My Window" style="padding:10px;width:200px;height:100px;">
        window content
    </div>
    <script>
        $(function () {
            $('#win2').window({
                collapsible:false,
                minimizable:false,
                maximizable:false
            });
        });
    </script>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>
        自定义窗口工具栏,添加自定义按钮
        <a href="javascript:$('#win3').window('open');" class="easyui-linkbutton" icon="icon-print" >open</a>
    </p>
    <div id="win3" class="easyui-window" closed="true" title="My Window" style="padding:10px;width:200px;height:100px;">
        window content
    </div>
    <script>
        $(function () {
            $('#win3').window({
                collapsible:false,
                minimizable:false,
                maximizable:false,
                tools:[{
                    iconCls:'icon-add',
                    handler:function(){
                        alert('add');
                    }
                },{
                    iconCls:'icon-remove',
                    handler:function(){
                        alert('remove');
                    }
                }]
            });
        });
    </script>

    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>
        创建简单对话框
        <a href="javascript:$('#dd').window('open');" class="easyui-linkbutton" icon="icon-print" >open</a>
    </p>
    <div id="dd" class="easyui-dialog" closed="true" style="padding:5px;width:400px;height:200px;"
         title="My Dialog" iconCls="icon-ok"
         toolbar="#dlg-toolbar" buttons="#dlg-buttons">
        Dialog Content.
    </div>
    <div id="dlg-toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
    </div>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:alert('Ok')">Ok</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Cancel</a>
    </div>


    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>
        自定义带有工具条和按钮的对话框
        <a href="javascript:$('#dd2').window('open');" class="easyui-linkbutton" icon="icon-print" >open</a>
    </p>
    <div id="dd2" class="easyui-dialog" closed="true" title="My Dialog" style="width:400px;height:200px;padding:10px"
         toolbar="#dlg-toolbar2" buttons="#dlg-buttons2">
        Dialog Content.
    </div>
    <div id="dlg-toolbar2">
        <table cellpadding="0" cellspacing="0" style="width:100%">
            <tr>
                <td>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Edit</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help</a>
                </td>
                <td style="text-align:right">
                    <input></input><a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"></a>
                </td>
            </tr>
        </table>
    </div>
    <div id="dlg-buttons2">
        <table cellpadding="0" cellspacing="0" style="width:100%">
            <tr>
                <td>
                    <img src="/images/msn.gif" width="50px" height="50px"/>
                </td>
                <td style="text-align:right">
                    <a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="javascript:alert('save')">Save</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Close</a>
                </td>
            </tr>
        </table>
    </div>

</body>
</html>